<script setup lang="ts">
import { onMounted } from "vue";
import AppHeader from "./components/AppHeader.vue";
// import AppFooter from './components/AppFooter.vue'
import { useConfig } from "@/composables/useConfig";

const { loadConfig } = useConfig();

onMounted(() => {
  loadConfig();
});
</script>

<template>
  <div id="app" class="w-full min-h-screen">
    <AppHeader />
    <main class="w-full">
      <router-view />
    </main>
    <el-backtop :right="100" :bottom="100" class="pc-only-backtop" />
    <el-backtop :right="30" :bottom="300" class="backtop-iphone" />
  </div>
</template>

<style>
/* 默认隐藏 */
.pc-only-backtop {
  display: none !important;
}
.backtop-iphone {
  display: none;
}
/* 在 PC 屏幕（比如宽度 ≥ 768px）时显示 */
@media (min-width: 768px) {
  .pc-only-backtop {
    display: flex;
  }
}
/* 在 PC 屏幕（比如宽度 ≥ 768px）时显示 */
@media (max-width: 768px) {
  .backtop-iphone {
    display: flex;
  }
}
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: 100%;
}
@media only screen and (min-width: 1240px) {
  .container {
    max-width: 1102px;
  }
}
@media only screen and (min-width: 960px) and (max-width: 1239px) {
    .container {
        max-width: 940px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container {
    max-width: 708px;
  }
}
@media only screen and (max-width: 767px) {
  .container {
    max-width: 480px !important;  
  }
}
</style>
